<template>
    <section>
        <div id="log" style="margin:10px auto;">
            <div class="console" id="terminal"></div>
        </div>
    </section>
</template>

<script>
import "xterm/css/xterm.css";
import { Terminal } from "xterm";
import { FitAddon } from "xterm-addon-fit";
import { AttachAddon } from "xterm-addon-attach";

export default {
    name: "Xterm",
    props: {
        socketURI: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            term: null,
            socket: null,
            rows: 28,
            cols: 20,
            SetOut: false,
            isKey: false
        };
    },
    mounted() {
        this.initSocket();

    },
    beforeDestroy() {
        this.socket.close();
        // this.term.dispose();
    },
    methods: {
        //Xterm主题
        initTerm() {
            const term = new Terminal({
                rendererType: "canvas", //渲染类型
                rows: this.rows, //行数
                // cols: this.cols,// 设置之后会输入多行之后覆盖现象
                convertEol: true, //启用时，光标将设置为下一行的开头
                // scrollback: 10,//终端中的回滚量
                fontSize: 14, //字体大小
                disableStdin: false, //是否应禁用输入。
                cursorStyle: "block", //光标样式
                cursorBlink: true, //光标闪烁
                scrollback: 30,
                tabStopWidth: 4,
                theme: {
                    foreground: "yellow", //字体
                    background: "#060101", //背景色
                    cursor: "help" //设置光标
                }
            });
            const attachAddon = new AttachAddon(this.socket);
            const fitAddon = new FitAddon();
            term.loadAddon(attachAddon);
            term.loadAddon(fitAddon);
            term.open(document.getElementById("terminal"));
            term.focus();
            let _this = this;
            // term.prompt = () => {
            //     term.write("\n");
            // };
            term.prompt();
            function runFakeTerminal(_this) {
                if (term._initialized) {
                    return;
                }
                term._initialized = true;
                term.writeln();
                term.prompt();
                term.onData(function (key) {
                    let order = {
                        Data: key,
                        Op: "stdin"
                    };
                    _this.onSend(order);
                });
                _this.term = term;
            }
            runFakeTerminal(_this);
        },
        //webShell主题
        initSocket() {
            const WebSocketUrl = "ws://localhost:8082/wss"
            this.socket = new WebSocket(
                WebSocketUrl
            );
            this.socketOnClose(); //关闭
            this.socketOnOpen(); //
            this.socketOnError();
        },
        socketOnOpen() {
            this.socket.onopen = () => {
                this.initTerm();
            };
        },
        socketOnClose() {
            this.socket.onclose = () => {
                console.log("close socket");
            };
        },
        socketOnError() {
            this.socket.onerror = () => {
                console.log("socket 链接失败");
            };
        },
        onSend(data) {
            data = this.base.isObject(data) ? JSON.stringify(data) : data;
            data = this.base.isArray(data) ? data.toString() : data;
            data = data.replace(/\\\\/, "\\");
            this.shellWs.onSend(data);
        },
        trim(str) {
            return str.replace(/(^\s*)|(\s*$)/g, "");
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
    font-weight: normal;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    display: inline-block;
    margin: 0 10px;
}

a {
    color: #42b983;
}
</style>